<template>
  <div class="container">
    <Breadcrumb
      :items="['menu.globalconfiguration', 'menu.globalconfiguration.detail']"
    />
    <a-form ref="formRef" layout="vertical" :model="formData">
      <a-space direction="vertical" :size="16">
        <a-card class="general-card">
          <template #title>
            {{ $t('detailForm.title.basic') }}
          </template>
          <a-row :gutter="80">
            <a-col :span="6">
              <a-form-item
                :label="$t('detailForm.form.label.basic.enabled')"
                field="enabled"
              >
                <a-radio-group v-model="formData.enabled">
                  <a-radio :value="true">{{ $t('radio.enabled') }}</a-radio>
                  <a-radio :value="false">{{ $t('radio.disabled') }}</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label="$t('detailForm.form.label.basic.baseUrl')"
                field="baseUrl"
              >
                <a-input
                  v-model="formData.baseUrl"
                  :placeholder="$t('detailForm.placeholder.basic.baseUrl')"
                >
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label="$t('detailForm.form.label.basic.requestIdKey')"
                field="requestIdKey"
              >
                <a-input
                  v-model="formData.requestIdKey"
                  :placeholder="$t('detailForm.placeholder.basic.requestIdKey')"
                >
                </a-input>
              </a-form-item>
            </a-col>
          </a-row>
        </a-card>
        <a-card class="general-card">
          <template #title>
            {{ $t('detailForm.title.downstream.scheme') }}
          </template>
          <a-row :gutter="80">
            <a-col :span="6">
              <a-form-item
                :label="$t('detailForm.form.label.downstream.scheme')"
                field="downstreamScheme"
              >
                <a-select
                  v-model="formData.downstreamScheme"
                  allow-clear
                  :placeholder="$t('detailForm.placeholder.downstream.scheme')"
                >
                  <a-option value="http">http</a-option>
                  <a-option value="https">https</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label="$t('detailForm.form.label.downstream.scheme.https')"
                field="downstreamHttpVersion"
              >
                <a-select
                  v-model="formData.downstreamHttpVersion"
                  allow-clear
                  :placeholder="
                    $t('detailForm.placeholder.downstream.scheme.https')
                  "
                >
                  <a-option value="1.0">1.0</a-option>
                  <a-option value="1.1">1.1</a-option>
                  <a-option value="2.0">2.0</a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-card>
        <a-card class="general-card" :bordered="false">
          <template #title>
            {{ $t('detailForm.title.load.balancer') }}
          </template>
          <a-row :gutter="80">
            <a-col :span="6">
              <a-form-item
                :label="$t('load.balancer.type')"
                field="loadbalancerType"
              >
                <a-select
                  v-model="formData.loadbalancerType"
                  allow-clear
                  :placeholder="$t('detailForm.placeholder.load.balancer.type')"
                >
                  <a-option value="LeastConnection">{{
                    $t('load.balancer.type.least.connection')
                  }}</a-option>
                  <a-option value="RoundRobin">{{
                    $t('load.balancer.type.round.robin')
                  }}</a-option>
                  <a-option value="NoLoadBalance">{{
                    $t('load.balancer.type.no.load.balance')
                  }}</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label="$t('load.balancer.key')"
                field="loadbalancerKey"
              >
                <a-input
                  v-model="formData.loadbalancerKey"
                  :placeholder="$t('detailForm.placeholder.load.balancer.key')"
                >
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label="$t('load.balancer.expiry')"
                field="loadbalancerExpiry"
              >
                <a-input-number
                  v-model="formData.loadbalancerExpiry"
                  :hide-button="true"
                  :placeholder="
                    $t('detailForm.placeholder.load.balancer.expiry')
                  "
                >
                </a-input-number>
              </a-form-item>
            </a-col>
          </a-row>
        </a-card>
        <a-card class="general-card">
          <template #title>
            {{ $t('service.discovery') }}
          </template>
          <a-row :gutter="80">
            <a-col :span="6">
              <a-form-item
                :label="$t('service.discovery.enabled')"
                field="serviceDiscoveryEnabled"
              >
                <a-radio-group v-model="formData.serviceDiscoveryEnabled">
                  <a-radio :value="true">{{ $t('radio.enabled') }}</a-radio>
                  <a-radio :value="false">{{ $t('radio.disabled') }}</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label="$t('service.discovery.scheme')"
                field="servicediscoveryScheme"
              >
                <a-select
                  v-model="formData.servicediscoveryScheme"
                  allow-clear
                  :placeholder="
                    $t('detailForm.placeholder.service.discovery.scheme')
                  "
                >
                  <a-option value="http">http</a-option>
                  <a-option value="https">https</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label="$t('service.discovery.host')"
                field="ServicediscoveryHost"
              >
                <a-input
                  v-model="formData.servicediscoveryHost"
                  :placeholder="
                    $t('detailForm.placeholder.service.discovery.host')
                  "
                >
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label="$t('service.discovery.port')"
                field="ServicediscoveryPort"
              >
                <a-input-number
                  v-model="formData.servicediscoveryPort"
                  :hide-button="true"
                  :placeholder="
                    $t('detailForm.placeholder.service.discovery.port')
                  "
                >
                </a-input-number>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="80">
            <a-col :span="6">
              <a-form-item
                :label="$t('service.discovery.type')"
                field="servicediscoveryType"
              >
                <a-select
                  v-model="formData.servicediscoveryType"
                  allow-clear
                  :placeholder="
                    $t('detailForm.placeholder.service.discovery.type')
                  "
                >
                  <a-option value="Consul">Consul</a-option>
                  <a-option value="PollConsul">PollConsul</a-option>
                  <a-option value="Eureka">Eureka</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label="$t('service.discovery.token')"
                field="servicediscoveryToken"
              >
                <a-input
                  v-model="formData.servicediscoveryToken"
                  :placeholder="
                    $t('detailForm.placeholder.service.discovery.token')
                  "
                >
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label="$t('service.discovery.configuration.key')"
                field="ServicediscoveryConfigurationkey"
              >
                <a-input
                  v-model="formData.servicediscoveryConfigurationkey"
                  :placeholder="
                    $t(
                      'detailForm.placeholder.service.discovery.configuration.key'
                    )
                  "
                >
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label="$t('service.discovery.namespace')"
                field="ServicediscoveryNamespace"
              >
                <a-input
                  v-model="formData.servicediscoveryNamespace"
                  :placeholder="
                    $t('detailForm.placeholder.service.discovery.namespace')
                  "
                >
                </a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="80">
            <a-col :span="6">
              <a-form-item
                :label="$t('service.discovery.polling.interval')"
                field="ServicediscoveryPollinginterval"
              >
                <a-input-number
                  v-model="formData.servicediscoveryPollinginterval"
                  :hide-button="true"
                  :placeholder="
                    $t(
                      'detailForm.placeholder.service.discovery.polling.interval'
                    )
                  "
                >
                  <template #append> {{ $t('unit.ms') }} </template>
                </a-input-number>
              </a-form-item>
            </a-col>
          </a-row>
        </a-card>
        <a-card class="general-card" :bordered="false">
          <template #title>
            {{ $t('detailForm.title.qos') }}
          </template>
          <a-row :gutter="80">
            <a-col :span="6">
              <a-form-item :label="$t('qos.enabled')" field="QosEnabled">
                <a-radio-group v-model="formData.qosEnabled">
                  <a-radio :value="true">{{ $t('radio.enabled') }}</a-radio>
                  <a-radio :value="false">{{ $t('radio.disabled') }}</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label="$t('qos.exceptions.allowed.before.breaking')"
                field="QosExceptionsallowedbeforebreaking"
              >
                <a-input-number
                  v-model="formData.qosExceptionsallowedbeforebreaking"
                  :hide-button="true"
                  :placeholder="
                    $t(
                      'detailForm.placeholder.qos.exceptions.allowed.before.breaking'
                    )
                  "
                >
                </a-input-number>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label="$t('qos.duration.of.break')"
                field="QosDurationofbreak"
              >
                <a-input-number
                  v-model="formData.qosDurationofbreak"
                  :hide-button="true"
                  :placeholder="
                    $t('detailForm.placeholder.qos.duration.of.break')
                  "
                >
                  <template #append> ms </template>
                </a-input-number>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label="$t('qos.timeout.value')"
                field="QosTimeoutvalue"
              >
                <a-input-number
                  v-model="formData.qosTimeoutvalue"
                  :hide-button="true"
                  :placeholder="$t('detailForm.placeholder.qos.timeout.value')"
                >
                  <template #append> ms </template>
                </a-input-number>
              </a-form-item>
            </a-col>
          </a-row>
        </a-card>
        <a-card class="general-card" :bordered="false">
          <template #title>
            {{ $t('detailForm.title.rate.limit') }}
          </template>
          <a-row :gutter="80">
            <a-col :span="6">
              <a-form-item
                :label="$t('rate.limit.disable.rate.limit.headers')"
                field="RatelimitDisableratelimitheaders"
              >
                <a-radio-group
                  v-model="formData.ratelimitDisableratelimitheaders"
                >
                  <a-radio :value="true">{{ $t('radio.enabled') }}</a-radio>
                  <a-radio :value="false">{{ $t('radio.disabled') }}</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label="$t('rate.limit.client.id.header')"
                field="RatelimitClientidheader"
              >
                <a-input
                  v-model="formData.ratelimitClientidheader"
                  :placeholder="
                    $t('detailForm.placeholder.rate.limit.client.id.header')
                  "
                >
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label="$t('rate.limit.quota.exceeded.message')"
                field="RatelimitQuotaexceededmessage"
              >
                <a-input
                  v-model="formData.ratelimitQuotaexceededmessage"
                  :placeholder="
                    $t(
                      'detailForm.placeholder.rate.limit.quota.exceeded.message'
                    )
                  "
                >
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label="$t('rate.limit.http.status.code')"
                field="RatelimitHttpstatuscode"
              >
                <a-input-number
                  v-model="formData.ratelimitHttpstatuscode"
                  :hide-button="true"
                  :placeholder="
                    $t('detailForm.placeholder.rate.limit.http.status.code')
                  "
                >
                </a-input-number>
              </a-form-item>
            </a-col>
          </a-row>
          <!-- <a-row :gutter="80">
            <a-col :span="6">
              <a-form-item
                :label="$t('rate.limit.rate.limit.counter.prefix')"
                field="RatelimitRatelimitcounterprefix"
              >
                <a-input
                  v-model="formData.ratelimitRatelimitcounterprefix"
                  :placeholder="
                    $t(
                      'detailForm.placeholder.rate.limit.rate.limit.counter.prefix'
                    )
                  "
                >
                </a-input>
              </a-form-item>
            </a-col>
          </a-row> -->
        </a-card>
        <a-card class="general-card" :bordered="false">
          <template #title>
            {{ $t('http.handler') }}
          </template>
          <a-row :gutter="80">
            <a-col :span="6">
              <a-form-item
                :label="$t('http.handler.allow.auto.redirect')"
                field="HttphandlerAllowautoredirect"
              >
                <a-radio-group v-model="formData.httphandlerAllowautoredirect">
                  <a-radio :value="true">{{ $t('radio.allow') }}</a-radio>
                  <a-radio :value="false">{{ $t('radio.not.allow') }}</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label="$t('http.handler.use.cookie.container')"
                field="HttphandlerUsecookiecontainer"
              >
                <a-radio-group v-model="formData.httphandlerUsecookiecontainer">
                  <a-radio :value="true">{{ $t('radio.use') }}</a-radio>
                  <a-radio :value="false">{{ $t('radio.not.use') }}</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label="$t('http.handler.use.tracing')"
                field="HttphandlerUsetracing"
              >
                <a-radio-group v-model="formData.httphandlerUsetracing">
                  <a-radio :value="true">{{ $t('radio.use') }}</a-radio>
                  <a-radio :value="false">{{ $t('radio.not.use') }}</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label="$t('http.handler.use.proxy')"
                field="HttphandlerUseproxy"
              >
                <a-radio-group v-model="formData.httphandlerUseproxy">
                  <a-radio :value="true">{{ $t('radio.use') }}</a-radio>
                  <a-radio :value="false">{{ $t('radio.not.use') }}</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="80">
            <a-col :span="6">
              <a-form-item
                :label="$t('http.handler.max.connections.per.server')"
                field="HttphandlerMaxconnectionsperserver"
              >
                <a-input-number
                  v-model="formData.httphandlerMaxconnectionsperserver"
                  :hide-button="true"
                  :placeholder="
                    $t(
                      'detailForm.placeholder.http.handler.max.connections.per.server'
                    )
                  "
                >
                </a-input-number>
              </a-form-item>
            </a-col>
          </a-row>
        </a-card>
      </a-space>
      <div class="actions">
        <a-space>
          <a-button type="primary" :loading="loading" @click="onSubmitClick">
            {{ $t('submit') }}
          </a-button>
        </a-space>
      </div>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useI18n } from 'vue-i18n';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import useLoading from '@/hooks/loading';
  import {
    insertGlobalConfiguration,
    updateGlobalConfiguration,
    getGlobalConfiguration,
    GlobalConfigurationModel,
  } from '@/api/global-configuration';
  import { Message } from '@arco-design/web-vue';

  const { t } = useI18n();
  const formData = ref<GlobalConfigurationModel>({
    id: 0, // 主键Id
    baseUrl: '', // 基础地址
    requestIdKey: undefined, // 请求ID
    downstreamScheme: undefined, // 请求的方式（http,https）
    downstreamHttpVersion: undefined, // Http版本（1.0，1.1，2.0）
    loadbalancerType: undefined, // 负载均衡方式（LeastConnection，RoundRobin，NoLoadBalance）
    loadbalancerKey: undefined, // 负载均衡关键字
    loadbalancerExpiry: undefined, // 负载均衡结束时间
    httphandlerAllowautoredirect: undefined, // 允许自动跳转
    httphandlerUsecookiecontainer: undefined, // 使用Cookie容器
    httphandlerUsetracing: undefined, // 使用链路追踪
    httphandlerUseproxy: undefined, // 使用代理
    httphandlerMaxconnectionsperserver: undefined,
    qosEnabled: undefined, // 流量调控开启
    qosExceptionsallowedbeforebreaking: undefined, // 打开断路器之前允许的例外数量
    qosDurationofbreak: undefined, // 断路器复位之前打开的时间（ms）
    qosTimeoutvalue: undefined, // 请求超时时间（ms）
    ratelimitQuotaexceededmessage: undefined, // 超过限制提示语
    ratelimitRatelimitcounterprefix: undefined, // 计数前缀
    ratelimitDisableratelimitheaders: undefined, // 包含X-Rate-Limit和Rety-After
    ratelimitHttpstatuscode: undefined, // 超过限制Http状态码
    ratelimitClientidheader: undefined,
    servicediscoveryScheme: undefined, // Http协议（http,https）
    servicediscoveryHost: undefined,
    servicediscoveryPort: undefined,
    servicediscoveryType: undefined,
    servicediscoveryToken: undefined,
    servicediscoveryConfigurationkey: undefined,
    servicediscoveryPollinginterval: undefined,
    servicediscoveryNamespace: undefined,
    serviceDiscoveryEnabled: undefined, // 服务发现开启
    enabled: false,
  });
  const formRef = ref<FormInstance>();
  const { loading, setLoading } = useLoading();
  const onSubmitClick = async () => {
    setLoading(true);
    if (formData.value.id > 0) {
      await updateGlobalConfiguration(formData.value);
    } else {
      const { data } = await insertGlobalConfiguration(formData.value);
      formData.value.id = data;
    }
    const msg = t('detailForm.submitSuccess');
    Message.success({
      content: msg,
      duration: 5 * 1000,
    });
    setLoading(false);
  };
  const fetchData = async () => {
    try {
      const { data } = await getGlobalConfiguration();
      if (data) {
        formData.value = data;
      }
    } catch (err) {
      // you can report use errorHandler or other
    }
  };
  fetchData();
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 40px 20px;
    overflow: hidden;
  }

  .actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    padding: 14px 20px 14px 0;
    background: var(--color-bg-2);
    text-align: right;
  }
</style>
